// utils 工具类样式

/**
 * float
**/
.fr { float: right; }
.fl { float:  left; }

/**
 * clearfix
**/
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    content: '';
    clear: both;
    font-size: 0;
    height: 0;
  }
}

/**
 * margin
**/
// small
.mt-5  { margin-top    :  5px; }
.ml-5  { margin-left   :  5px; }
.mb-5  { margin-bottom :  5px; }
.mr-5  { margin-right  :  5px; }
// medium
.mt-10 { margin-top    : 10px; }
.ml-10 { margin-left   : 10px; }
.mb-10 { margin-bottom : 10px; }
.mr-10 { margin-right  : 10px; }
// large
.mt-20 { margin-top    : 20px; }
.ml-20 { margin-left   : 20px; }
.mb-20 { margin-bottom : 20px; }
.mr-20 { margin-right  : 20px; }

/**
 * padding
**/
// small
.pt-5  { padding-top    :  5px; }
.pl-5  { padding-left   :  5px; }
.pb-5  { padding-bottom :  5px; }
.pr-5  { padding-right  :  5px; }
// medium
.pt-10 { padding-top    : 10px; }
.pl-10 { padding-left   : 10px; }
.pb-10 { padding-bottom : 10px; }
.pr-10 { padding-right  : 10px; }
// large
.pt-20 { padding-top    : 20px; }
.pl-20 { padding-left   : 20px; }
.pb-20 { padding-bottom : 20px; }
.pr-20 { padding-right  : 20px; }


/**
 * container
**/
.block {
  display: block;
}

.inlineBlock {
  display: inline-block;
}

/**
 * mouse action
**/
.pointer {
  cursor: pointer;
}

.pointer-text {
  cursor: text;
}

/**
 * text
**/
.text-overflow__single {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.text-overflow__mutiple {
  display : -webkit-box;
  -webkit-box-orient : vertical;
  -webkit-line-clamp : 2;
  text-overflow : ellipsis;
  overflow: hidden;
}